<template>
  <div :class="[
    'wrap',
    hasTopBorder && 'border-top',
    hasBottomBorder && 'border-bottom',
    marginTop && 'mt-2',
    marginBottom && 'mb-2'
  ]">
    <text class="title"
          @click="onTitleClick">{{title}}</text>
    <text class="right"
          @click="onRightClick">{{rightText}}</text>
    <text class="icon arrow-icon"
          v-if="showArrow"
          @click="onRightClick">&#xe6a2;</text>
    <slot></slot>
    <slot name="right"></slot>
  </div>
</template>
<script>


export default {
  components: {},
  props: {
    title: {
      type: String,
      default: ''
    },
    rightText: {
      type: String,
      default: ''
    },
    showArrow: {
      type: Boolean,
      default: true
    },
    hasTopBorder: {
      type: Boolean,
      default: false
    },
    marginTop: {
      type: Boolean,
      default: false
    },
    marginBottom: {
      type: Boolean,
      default: false
    },
    hasBottomBorder: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() { },
  methods: {
    onTitleClick() {
      this.$emit('titleClick', true)
    },
    onRightClick() {
      this.$emit('rightClick', true)
    }
  }
}
</script>
<style scoped>
.icon {
  font-family: alicon;
  color: #999;
  font-size: 26px;
  padding-top: 25px;
  padding-bottom: 25px;
}
.wrap {
  padding-right: 15px;
  flex-direction: row;

  align-items: center;
  background-color: #fff;
}
.title {
  padding: 25px;
  font-size: 32px;
  flex: 1;
}
.right {
  padding-left: 25px;
  padding-top: 25px;
  padding-bottom: 25px;
  font-size: 28px;
  color: #999;
}
.border-top {
  border-top-color: #dee2e6;
  border-top-width: 1px;
}
.border-bottom {
  border-bottom-color: #dee2e6;
  border-bottom-width: 1px;
}
.mt-2 {
  margin-top: 15px;
}
.mb-2 {
  margin-bottom: 15px;
}
.arrow-icon {
  font-size: 36px;
  color: #999;
}
</style>
